<script setup lang="ts">
// import { Icon } from "@iconify/vue";
import { computed, unref } from "vue";
import { ElIcon } from "element-plus";
const props = defineProps({
  icon: {
    type: String,
    default: "",
  },
  prefix: {
    type: String,
    default: "icon",
  },
  size: {
    type: String,
    default: "16px",
  },
  color: {
    type: String,
    default: "var(--icon-color)",
  },
});

// 是否是element-plus的图标
const isElICON = computed(() => {
  return props.icon.startsWith("el:");
});

const Icon = computed(() => {
  if (unref(isElICON)) {
    const ElIconStr = props.icon.split("el:")[1];
    return ElIconStr;
  } else {
    return `#${props.prefix}-${props.icon}`;
  }
});
</script>

<template>
  <ElIcon :size="size" :color="color">
    <svg aria-hidden="true" v-if="!unref(isElICON)">
      <use :href="Icon" />
    </svg>
    <template v-else>
      <component :is="Icon"></component>
    </template>
  </ElIcon>
</template>
<style scoped lang="less"></style>
